<template>
	<div class="common-layout1" ref="carouselFourc">
		<el-carousel
			class="content-right1"
			:autoplay="false"
			@change="changeLB"
			ref="carousel"
			@mouseenter.native="delHandleMouseEnter"
			height="100vh"
			:interval="10000"
		>
			<el-carousel-item>
				<Home v-if="indexActive == 0" />
			</el-carousel-item>
			<el-carousel-item>
				<ScaleScreen
					:width="1920"
					:height="1080"
					class="scale-wrap"
					:fullScreen="true"
				>
					<el-scrollbar class="scrollbar-wrapper" style="height: 100%">
						<energystation v-if="indexActive == 1" />
					</el-scrollbar>
				</ScaleScreen>
			</el-carousel-item>
			<el-carousel-item>
				<ScaleScreen
					:width="1920"
					:height="1080"
					class="scale-wrap"
					:fullScreen="true"
				>
					<el-scrollbar class="scrollbar-wrapper" style="height: 100%">
						<energyunit v-if="indexActive == 2" />
					</el-scrollbar>
				</ScaleScreen>
			</el-carousel-item>
			<el-carousel-item>
				<ScaleScreen
					:width="1920"
					:height="1080"
					class="scale-wrap"
					:fullScreen="true"
				>
					<el-scrollbar class="scrollbar-wrapper" style="height: 100%">
						<psc v-if="indexActive == 3" />
					</el-scrollbar>
				</ScaleScreen>
			</el-carousel-item>
			<el-carousel-item>
				<ScaleScreen
					:width="1920"
					:height="1080"
					class="scale-wrap"
					:fullScreen="true"
				>
					<el-scrollbar class="scrollbar-wrapper" style="height: 100%">
						<batterystack v-if="indexActive == 4" />
					</el-scrollbar>
				</ScaleScreen>
			</el-carousel-item>
			<el-carousel-item>
				<ScaleScreen
					:width="1920"
					:height="1080"
					class="scale-wrap"
					:fullScreen="true"
				>
					<el-scrollbar class="scrollbar-wrapper" style="height: 100%">
						<batterycluster v-if="indexActive == 5" />
					</el-scrollbar>
				</ScaleScreen>
			</el-carousel-item>
			<el-carousel-item>
				<ScaleScreen
					:width="1920"
					:height="1080"
					class="scale-wrap"
					:fullScreen="true"
				>
					<el-scrollbar class="scrollbar-wrapper" style="height: 100%">
						<photovoltaic v-if="indexActive == 6" />
					</el-scrollbar>
				</ScaleScreen>
			</el-carousel-item>
			<el-carousel-item>
				<ScaleScreen
					:width="1920"
					:height="1080"
					class="scale-wrap"
					:fullScreen="true"
				>
					<el-scrollbar class="scrollbar-wrapper" style="height: 100%">
						<waringlist v-if="indexActive == 7" />
					</el-scrollbar>
				</ScaleScreen>
			</el-carousel-item>
			<el-carousel-item>
				<ScaleScreen
					:width="1920"
					:height="1080"
					class="scale-wrap"
					:fullScreen="true"
				>
					<el-scrollbar class="scrollbar-wrapper" style="height: 100%">
						<cost v-if="indexActive == 8" />
					</el-scrollbar>
				</ScaleScreen>
			</el-carousel-item>
			<el-carousel-item>
				<ScaleScreen
					:width="1920"
					:height="1080"
					class="scale-wrap"
					:fullScreen="true"
				>
					<el-scrollbar class="scrollbar-wrapper" style="height: 100%">
						<control v-if="indexActive == 9" />
					</el-scrollbar>
				</ScaleScreen>
			</el-carousel-item>
		</el-carousel>
	</div>
</template>
<script>
import Home from "../Home/home.vue"; //首页
import energystation from "../energystation/index.vue"; //储藏单元
import energyunit from "../energyunit/index.vue"; //
import psc from "../psc/index.vue"; //
import ScaleScreen from "@/components/scale-screen/scale-screen.vue";

import batterystack from "../batterystack/index.vue"; //
import batterycluster from "../batterycluster/index.vue"; //
import photovoltaic from "../photovoltaic/index.vue"; //
import waringlist from "../waringlist/index.vue"; //
import cost from "../cost/index.vue"; //
import control from "../control/index.vue"; //

export default {
	components: {
		Home,
		energystation,
		energyunit,
		psc,
		batterystack,
		batterycluster,
		photovoltaic,
		ScaleScreen,
		waringlist,
		cost,
		control,
	},
	data() {
		return {
			indexActive: 0,
			timer: false,
		};
	},
	mounted() {
		let self = this;
		window.addEventListener("keyup", self.keyTagfunction);
		this.timer = setInterval(() => {
			self.indexActive <= 8 ? self.indexActive++ : (self.indexActive = 0);
			// console.log(self.indexActive);
			this.$refs.carousel.next();
		}, 10000);
	},
	beforeDestroy() {
		let self = this;
		clearInterval(this.timer);
		window.removeEventListener("keyup", self.keyTagfunction);
	},
	methods: {
		keyTagfunction(e) {
			if (e && e.keyCode == "27") this.$router.push({ path: "/home" });
		},
		changeLB(newVal, oldVal) {
			this.indexActive = newVal;
		},
		delHandleMouseEnter() {
			this.$refs.carousel.handleMouseEnter = () => {};
		},
	},
};
</script>
<style lang="scss">
.el-carousel {
	width: 100%;
	height: 100%;
}

.el-carousel__container,
.el-carousel-item {
	width: 100%;
	height: 100%;
	background-color: #050614;
}
.el-scrollbar__view {
	height: 100%;
}

.timers1 {
	position: absolute;
	right: 10px;
	top: 10px;
	color: #fff;
	z-index: 11;
	cursor: pointer;
}

.table-container {
	height: 100%;
}
</style>
